<template>
  <div>
    <div class="outDiv">
      <scroller lock-x>
        <div>
          <Header contentTitle="专业库"></Header>
          <div class="main">
            <div class="titleTab">
              <tab :line-width=1>
                <tab-item :selected="choTitleTab === item" :disabled="item === '专科'" v-for="(item, index) in titleList" @on-item-click="titleTabClick(item)" :key="index">{{item}}</tab-item>
              </tab>
            </div>
            <div class="content">
              <ul class="tabLists">
                <li 
                  :class="['tabItem', index == activeItem ? 'active' : '']" 
                  v-for="(item, index) of tabLists" 
                  :key="index"
                  @click="changeActiveItem(index, item.type_code, item.type_name)"
                >
                  {{ item.type_name }}
                </li>
              </ul>
              <div class="tabRight">
                <div class="tabDetail" v-for="(item, index) of detailLists" :key="index">
                  <div class="detail_title">{{ item.catalog_name }}</div>
                  <div class="detail_content">
                    <span v-for="(n, i) of item.majors" :key="i" @click="jumpToDetail(n.major_code)">{{ n.major_name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </scroller>  
    </div>
  </div>
</template>

<script>
import { Tab, TabItem } from 'vux'
import Header from '~/components/Header'
import axios from '~/plugins/axios';
import ls from 'store2';
export default {
  components: {
    Header,
    Tab,
    TabItem
  },
  data() {
    return {
      titleList: ['本科', '专科'],
      choTitleTab: '本科',
      tabLists: [],
      activeItem: 0,
      detailLists: [],
    }
  },
  mounted() {
    this.getTypeList(1);
  },
  methods: {
    titleTabClick(item) {
      this.choTitleTab = item;
      // if (item == '专科') {
      //   this.$vux.toast.text('暂无专科数据');
      // }
      this.getTypeList(1);
    },
    jumpToDetail(type_code) {
      ls.set('preUrl', '../professional');
      const params = {
        typeId: ls.get('userType'),
        code: type_code
      }
      this.goto('/professional/detail', params)

    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },  
    changeActiveItem(index, typeId, typeName) {
      this.activeItem = index;
      this.getThirdList(typeId);
    },
    getTypeList(typeId) {
      axios.post('https://app.sx985.com/api/major/gettype', { level: typeId }).then(res => {
        if (res.code == 200) {
          const data = res.data;
          this.tabLists = res.data;
          this.getThirdList(data[0].type_code);
        }
      })
    },
    getThirdList(typeId) {
      axios.post('https://app.sx985.com/api/major/getcatalogall', { type_code: typeId }).then(res => {
        if (res.code == 200) {
          const data = res.data;
          this.detailLists = res.data;
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .outDiv {
    width: 100%;
    height: 100vh;
    background: #FFF;
    .main {
      margin-top: 0.32rem;
      .titleTab {
        padding: 0 1.75rem;
        margin-bottom: 0.32rem;
        /deep/ .vux-tab {
          width: 4rem;
          height: 0.8rem;
          border-radius: 0.4rem;
          border: 1px solid rgba(229,232,237,1);
          padding: 0.08rem;
          .vux-tab-item {
            width: 1.88rem;
            line-height: 0.64rem;
            background: #FFF;
            border-radius: 0.32rem;
            color: #999;
            font-size: 0.3rem;
            font-weight: bold;
          }
          .vux-tab-item.vux-tab-selected {
            background: #80D566;
            color: #FFF;
          }
          .vux-tab-ink-bar { background-color: transparent; }
        }
      }
      .content {
        width: 100%;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 10px 0px rgba(153,153,153,0.2);
        background: #F7F7FA;
        display: flex;
        justify-content: flex-start;
        .tabLists {
          padding-left: 0;
          list-style: none;
          width: 2.4rem;
          
          .tabItem {
            width: 100%;
            height: 0.96rem;
            line-height: 0.96rem;
            font-size: 0.3rem;
            color: #222;
            text-align: center;
            position: relative;
          }
          li.tabItem.active { background: #FFF; }
          li.tabItem.active:before {
            content: '';
            display: inline-block;
            width: 0.12rem;
            height: 0.24rem;
            background: #80D566;
            border-radius: 0.08rem;
            position: absolute;
            top: 0.36rem;
            left: 0.2rem;
          }
        }
        .tabRight {
          width: 100%;
          background: #FFF;
          padding: 0.32rem;
          .tabDetail {
            margin-bottom: 0.1rem;
            .detail_title {
              padding: 0.16rem 0 0.32rem; 
              border-bottom: 1px solid #E5E8ED;
              margin-bottom: 0.32rem;
              line-height: 0.4rem;
              font-size: 0.28rem;
              font-weight: bold;
              color: #000;
              letter-spacing: 2px;
            }
            .detail_content {
              display: flex;
              justify-content: flex-start;
              flex-wrap: wrap;
              span {
                font-size: 0.28rem;
                color: #000;
                line-height: 0.4rem;
                margin-bottom: 0.3rem;
                margin-right: 0.4rem;
              }
            }
          }
        }
      }
    }
  }    
</style>
